<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery021</title>

<!-- 
第一节：Jquery Ajax 简介
第二节：Jquery Ajax Load 方法
第三节：jquery Ajax Get/Post 方法
Jquery 对Ajax 操作封装了一套跨浏览器，方便用户使用的Api；
远程请求，把请求的数据载入到DOM 里；
load( url , [,data] , [,callback])
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法
Ajax 请求后台；
$.post(URL,data,callback);
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法
 -->
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

<script type="text/javascript">
	//文档加载完毕事件
	$(document).ready(function(){
		$("#b1").click(function(){
			$("#d1").load("/StudyJQuery/ajax?action=load",{name:"张三",age:23},function(){
				alert("执行完成");
			});
		});
		
		$("#b2").click(function(){
			$.get("/StudyJQuery/ajax?action=post",{id:10},function(data,textStatus){
				alert("状态信息："+textStatus);
				alert("返回信息："+data);
				data = eval("("+data+")");
				$("#name").val(data.name);
				$("#age").val(data.age);
			});
		});
	});
	
	

</script>
</head>
<body>

<input type="button" id="b1" value="Ajax加载数据"/>

<div id="d1"></div>
<input type="button" id="b2" value="Post/Get加载数据"/><br/>

姓名：<input type="text" id = "name" name="name"/><br/>
年龄：<input type="text" id = "age" name="age"/>

</body>
</html>